<template>
  <div class="color-container">
    <div class="color-warp">
      <!-- 选择颜色 -->
      <div class="select-color-type">
        <div
          @click="handleSelectColorType('color')"
          class="color-item"
          :class="{
            'active': colorType === 'color'
          }">纯色</div>
        <div
          @click="handleSelectColorType('gradient')"
          class="color-item"
          :class="{
            'active': colorType === 'gradient'
          }">渐变</div>
      </div>

      <!-- 颜色选择 纯色-->
      <div v-if="colorType === 'color'" class="color-main">
        <!-- 透明度选择 -->
        <div class="slider-container">
          <img class="filter-icon" src="@/assets/images/text/edit_toumingdu.png" alt="">
          <div>
            <span class="filter-text">透明度：</span>
            <span class="filter-num">{{ filterNum }}%</span>
          </div>
          <div class="slider-content">
            <van-slider v-model="filterNum" @input="changeOpacity" @drag-end="changeOpacityEnd" bar-height="4px" active-color="#AAB9E3" />
          </div>
        </div>
        <!-- 透明度选择 -->

        <!-- 颜色选择 -->
        <div class="color-box-container">
          <div class="color-box" :style="{
            backgroundColor: color
          }"></div>
          <van-field v-model="color" label-width="0" class="color-input-container" placeholder="请输入颜色值" />
        </div>
        <div class="select-color-container">
          <div class="select-color-content">
            <span
            v-for="item in colorList.Content.list"
            :key="item.id"
            :style="{
              backgroundColor: item.value,
              border: item.value === '#ffffff' ? '2px solid #eaeaea' : `2px solid ${item.value}`
            }"
            :class="{
              'active-color': item.value === color
            }"
            class="color-block"
            @click="changeColor(item.value)"></span>
          </div>
        </div>
        <div class="selection-tip">可左右滑动选择颜色</div>
        <!-- 颜色选择 -->
      </div>
      <!-- 颜色选择 渐变色-->
      <div v-else-if="colorType === 'gradient'" class="color-main">
        <!-- 透明度选择 -->
        <div class="slider-container">
          <img class="filter-icon" src="@/assets/images/text/edit_toumingdu.png" alt="">
          <div>
            <span class="filter-text">透明度：</span>
            <span class="filter-num">{{ filterNum }}%</span>
          </div>
          <div class="slider-content">
            <van-slider v-model="filterNum" @input="changeOpacity" @drag-end="changeOpacityEnd" bar-height="4px" active-color="#AAB9E3" />
          </div>
        </div>
        <!-- 透明度选择 -->

        <!-- 颜色选择 渐变开始颜色-->
        <div class="color-box-container">
          <div class="color-box" :style="{
            backgroundColor: fill_color1
          }"></div>
          <van-field v-model="fill_color1" label-width="0" class="color-input-container" placeholder="请输入颜色值" />
        </div>
        <div class="selection-tip" style="padding-top: 10px;">渐变开始颜色（可左右滑动选择颜色）</div>
        <div class="select-color-container">
          <div class="select-color-content">
            <span
            v-for="item in colorList.Content.list"
            :key="item.id"
            :style="{
              backgroundColor: item.value,
              border: item.value === '#ffffff' ? '2px solid #eaeaea' : `2px solid ${item.value}`
            }"
            :class="{
              'active-color': item.value === fill_color1
            }"
            class="color-block"
            @click="changeFillColor1(item.value)"></span>
          </div>
        </div>

        <!-- 颜色选择 渐变结束颜色-->
        <div class="color-box-container">
          <div class="color-box" :style="{
            backgroundColor: fill_color2
          }"></div>
          <van-field v-model="fill_color2" label-width="0" class="color-input-container" placeholder="请输入颜色值" />
        </div>
        <div class="selection-tip" style="padding-top: 10px;">渐变结束颜色（可左右滑动选择颜色）</div>
        <div class="select-color-container">
          <div class="select-color-content">
            <span
            v-for="item in colorList.Content.list"
            :key="item.id"
            :style="{
              backgroundColor: item.value,
              border: item.value === '#ffffff' ? '2px solid #eaeaea' : `2px solid ${item.value}`
            }"
            :class="{
              'active-color': item.value === fill_color2
            }"
            class="color-block"
            @click="changeFillColor2(item.value)"></span>
          </div>
        </div>
      </div>
    </div>

    <div class="slider-warp">
      <!-- 描边宽度 -->
      <div class="slider-container">
        <img class="filter-icon" src="@/assets/images/text/edit_toumingdu.png" alt="">
        <div>
          <span class="filter-text">描边宽度：</span>
          <span class="filter-num">{{ strokeWidthNum / 100 }}</span>
        </div>
        <div class="slider-content">
          <van-slider v-model="strokeWidthNum" step="10" @input="changeStrokeWidth" @drag-end="changeStrokeWidthEnd" bar-height="4px" active-color="#AAB9E3" />
        </div>
      </div>
      <!-- 描边宽度 -->

      <!-- 颜色选择 -->
      <div class="color-box-container">
        <div class="color-box" :style="{
          backgroundColor: stroke
        }"></div>
        <van-field v-model="stroke" label-width="0" class="color-input-container" placeholder="请输入颜色值" />
      </div>
      <div class="select-color-container">
        <div class="select-color-content">
          <span
          v-for="item in colorList.Content.list"
          :key="item.id"
          :style="{
            backgroundColor: item.value,
            border: item.value === '#ffffff' ? '2px solid #eaeaea' : `2px solid ${item.value}`
          }"
          :class="{
            'active-color': item.value === stroke
          }"
          class="color-block"
          @click="changeStrokeColor(item.value)"></span>
        </div>
      </div>
      <div class="selection-tip">可左右滑动选择颜色</div>
      <!-- 颜色选择 -->
    </div>
  </div>
</template>

<script>
import colorListData from '../../lib/color'
export default {
  data() {
    return {
      filterNum: 100,
      colorList: colorListData,
      color: '#000000',
      strokeWidthNum: 0,
      stroke: '#000000',
      predefineColor: [],
      colorType: 'color',
      fill_color1: '#000000',
      fill_color2: '#000000',
    }
  },

  watch: {
    '$store.state.design.currentSelectionElement': {
      immediate: true,
      handler(val, oldVal) {
        if (val && val.type === 'textbox') {
          this.strokeWidthNum = (val.strokeWidth || 0) * 100;
          this.stroke = val.stroke;
          this.colorType = val.colorType ? val.colorType : 'color';
          if (val.colorType === 'gradient') {
            this.fill_color1 = val.fill.colorStops[0].color;
            this.fill_color2 = val.fill.colorStops[1].color;
          } else if (val.colorType === 'color') {
            this.color = val.fill;
          }
        }
      }
    },
    color: {
      immediate: true,
      handler(val, oldVal) {
        if (val && this.colorType === 'color') {
          this.handAccountCanvas.updateTextBox({
            type: 'color',
            content: val
          })
        }
      }
    },
    fill_color1: {
      immediate: true,
      handler(val, oldVal) {
        if (val && this.colorType === 'gradient' && this.fill_color1.length === 7 && this.fill_color2.length === 7) {
          this.handAccountCanvas.updateTextBox({
            type: 'gradient',
            content: {
              fill_color1: this.fill_color1,
              fill_color2: this.fill_color2,
            }
          })
        }
      }
    },
    fill_color2: {
      immediate: true,
      handler(val, oldVal) {
        if (val && this.colorType === 'gradient' && this.fill_color1.length === 7 && this.fill_color2.length === 7) {
          this.handAccountCanvas.updateTextBox({
            type: 'gradient',
            content: {
              fill_color1: this.fill_color1,
              fill_color2: this.fill_color2,
            }
          })
        }
      }
    },
    stroke: {
      immediate: true,
      handler(val, oldVal) {
        if (val) {
          this.handAccountCanvas.updateTextBox({
            type: 'stroke',
            content: val
          })
        }
      }
    }
  },

  methods: {

    // 选择渐变1
    changeFillColor1(val) {
      this.fill_color1 = val;
    },

    // 选择渐变2
    changeFillColor2(val) {
      this.fill_color2 = val;
    },

    // 选择颜色类型
    handleSelectColorType(colorType) {
      this.colorType = colorType;
      if (colorType === 'gradient') {
        this.handAccountCanvas.updateTextBox({
          type: 'gradient',
          content: {
            fill_color1: this.fill_color1,
            fill_color2: this.fill_color2,
          }
        });
      } else if (colorType === 'color') {
        this.handAccountCanvas.updateTextBox({
          type: 'color',
          content: this.color,
        });
      }
    },

    // 设置描边颜色
    changeStrokeColor(val) {
      this.stroke = val;
    },

    // 改变描边宽度
    changeStrokeWidth(val) {
      this.strokeWidthNum = val;
      this.handAccountCanvas.updateTextBox({
        type: 'strokeWidth',
        content: val / 220,
        sliderType: 'input'
      });
    },

    // 改变描边宽度结束
    changeStrokeWidthEnd() {
      this.handAccountCanvas.updateTextBox({
        type: 'strokeWidth',
        content: this.strokeWidthNum / 220,
        sliderType: 'drag-end'
      });
    },

    // 改变透明度
    changeOpacity(val) {
      this.filterNum = val;
      this.handAccountCanvas.setActiveObjectOpacity(val, 'input');
    },

    // 改变透明度
    changeOpacityEnd(val) {
      this.handAccountCanvas.setActiveObjectOpacity(this.filterNum, 'drag-end');
    },

    // 改变字体颜色
    changeColor(val) {
      this.color = val;
    }

  }
}
</script>

<style lang="less" scoped>
  .color-container{
    min-height: 150px;
    overflow: hidden;
    padding: 0 12px 12px 12px;

    .select-color-type{
      width: 148px;
      height: 36px;
      margin: auto;
      display: flex;
      border-radius: 18px;
      border: 1px solid #eaeaea;
      margin-bottom: 12px;
      align-items: center;
      color: #eaeaea;
      overflow: hidden;

      .color-item{
        flex: 1;
        text-align: center;
        height: 36px;
        line-height: 34px;
      }

      .color-item.active{
        background: linear-gradient(to right, #8773f9, #1989fa);
      }
    }

    .color-warp{
      padding: 18px;
      background-color: #333;
    }

    .color-box-container{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 10px;

      .color-box{
        width: 36px;
        height: 36px;
        border: 2px solid #fff;
        border-radius: 4px;
      }

      .color-input-container{
        margin-left: 12px;
        border-radius: 4px;
        padding: 8px 10px;
        flex: 1;
      }
    }

    .slider-warp{
      padding: 18px;
      background-color: #666;
    }

    .slider-container{
      display: flex;
      height: 30px;
      align-items: center;
      color: #AAB9E3;

      .filter-icon{
        width: 15px;
        height: 15px;
      }

      .filter-text{
        margin-left: 15px;
        font-size: 12px;
      }

      .filter-num{
        display: inline-block;
        font-size: 12px;
        width: 40px;
      }

      .slider-content{
        flex: 1;
        padding-right: 24px;
      }
    }

    .select-color-container{
      overflow-x: auto;
      overflow-y: hidden;
      padding-top: 10px;
      // display: flex;
      // flex-wrap: wrap;

      .select-color-content{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 690vw;
        height: 30px;
      }

      .color-block{
        min-width: 18px;
        max-height: 18px;
        height: 18px;
        padding: 2px;
        display: inline-block;
        margin-right: 8px;
        margin-bottom: 8px;
        border-radius: 50%;
      }

      .active-color{
        background-clip: content-box;
      }
    }

    .selection-tip{
      text-align: center;
      font-size: 12px;
      color: #f8f8f8;
    }
  }
</style>
